import React, {Component} from "react";
import {
	View,
	Text,
	Image,
	TouchableOpacity,
	StyleSheet,
	ScrollView,
	StatusBar,
} from "react-native";

//引入轮播图；
import ImageSwipe from "./../page/ImageSwipe";
//引入Butotn按钮；
import Buttons from "./../components/Button";
//引入视频文件；
import VideoExam from "./../components/Video"; //视频播放功能；

//引入样式文件；
import styles from "./style";

const btnList = [
	{ id: 1, title: "健康教育", url: require("../images/btn1.png"), nav: "healthEdu", },
	{ id: 2, title: "商城", url: require("../images/btn2.png"), nav: "shoppingIndex", },
	{ id: 3, title: "健康数据", url: require("../images/btn3.png"), nav: "shoppingIndex", },
	{ id: 4, title: "活动", url: require("../images/btn4.png"), nav: "shoppingIndex", },
	{ id: 5, title: "健康天使", url: require("../images/btn5.png"), nav: "shoppingIndex", },
	{ id: 6, title: "一盏明灯", url: require("../images/btn6.png"), nav: "shoppingIndex", },
	{ id: 7, title: "商盟", url: require("../images/btn7.png"), nav: "shoppingIndex", },
	{ id: 8, title: "个人中心", url: require("../images/btn8.png"), nav: "shoppingIndex", },
];
				
export default class IndexPage extends Component {

	static navigationOptions = {
		tabBarLabel: "首页",
		title: "",
		tabBarIcon: ({tintColor}) => (
			<Image 
				source={require('../images/home.png')}
				style={[{tintColor: tintColor}, styles.iconImage]}
			/>
		),
	}

	constructor(props) {
		super(props);
	}

	render() {
		const {navigate} = this.props.navigation;
		const btnLists = btnList.map((list) => {
			return (
				<Buttons
					key={list.id}
					text={list.title}
					source={list.url}
					onPress={() => navigate(list.nav) }
				/>
			);
		})
		return (
			<View>
				<StatusBar 
					backgroundColor="rgba(255, 255, 255, 0)"
					barStyle="dark-content"
					translucent={true}
				/>
				<ScrollView>
					<ImageSwipe />
					<View style={styles.btnView}>
						{btnLists}
					</View>
					<VideoExam />
				</ScrollView>
			</View>
		);
	}
}
